<template>
	<div>
		<ul class="tabUrl nav nav-pills">
			<li class="nav-item" v-for="item in files" :key="item.id">
				<a
					href="javascript:;"
					@click.prevent="clickItem(item)"
					:class="getClassName(item)"
					>{{ item.title }}
					<span
						class="ml-2 icon-close"
						@click="
							e => {
								e.stopPropagation() //阻止冒泡
								closeItem(item.id)
							}
						">
						<i class="el-icon-close"></i>
					</span>
					<span v-show="getUnSaveMark(item.id)">
						<i class="ml-2 rounded-circle"></i>
					</span>
				</a>
			</li>
		</ul>
	</div>
</template>
<script>
import classNames from "classnames"
export default {
	name: "TabList",
	props: {
		// activeItem: { type: String, default: null },
		unSaveItems: Array,
		clickItem: Function,
		closeItem: Function,
		files: Array,
		activeItem: String,
	},
	data() {
		return {}
	},
	mounted() {},
	methods: {
		//tab项获取类名 组合类名
		getClassName(item) {
			let finalClass = classNames({
				"nav-link": true,
				active: this.activeItem === item.id, //激活的tab
				unSaveMark: this.getUnSaveMark(item.id), //未保存的tab
			})
			return finalClass
		},
		getUnSaveMark(id) {
			return this.unSaveItems.includes(id)
		},
	},
}
</script>
<style scoped>
.tabUrl {
	border-bottom: 1px solid white;
}
li a {
	border-radius: 0px !important;
	color: #fff;
}
li a.active {
	background-color: #3e403f !important;
}
.nav-link.unSaveMark .rounded-circle {
	width: 11px;
	height: 11px;
	background-color: #fff;
	display: inline-block;
}
.nav-link.unSaveMark .icon-close {
	display: none;
}
.nav-link.unSaveMark:hover .icon-close {
	display: inline-block;
}
.nav-link.unSaveMark:hover .rounded-circle {
	display: none;
}
</style>
